<template>
  <div class="process-m">
    <div class="body-wrap">
      <div v-if="status === '2' || status === '1'" class="tab-wrap">
        <div class="m-tab">
          <div class="tab-item tab1" @click="tabClick(0)" :class="{active: activeTab === 0 }">审批详情</div>
          <div class="tab-item tab2" @click="tabClick(1)" :class="{active: activeTab === 1 }">流程记录</div>
          <div class="tab-item tab3 " @click="tabClick(2)" :class="{active: activeTab === 2 }">流程图</div>
        </div>
      </div>
      <div class="tab-con"  :class="{tabNew: status !== '1'}" v-show="activeTab === 0">
        <otherform
          :step="step"
          :status="status"
          :process-instance-id="processInstanceId"
          :task-id="taskId"/>
      </div>
      <div class="tab-con" v-show="activeTab === 1">
        <van-steps direction="vertical" :active="0">
          <van-step v-for="(item, i) in stepData" :key="i">
            <div class="step-wrap" :class="{handing: item.taskStatus === 2}">
              <div class="t-title">
                <span class="activityName">{{item.activityName}}</span>
                <span class="startTime">{{item.startTime}}</span>
              </div>
              <div class="t-con">
                <div class="t-head">
                  <div>
                    <span class="assigneeName">{{item.assigneeName}}</span>
                    <span class="readStatus"> ({{ readStatusMap[item.readStatus] }}) </span>
                  </div>
                  <div class="operator">{{item.operator}}</div>
                  <div class="endTime">{{item.endTime}}</div>
                </div>
                <div class="t-body">
                  {{item.comment}}
                </div>
              </div>
            </div>
          </van-step>
        </van-steps>
      </div>
      <div class="tab-con" v-if="activeTab === 2">
        <iframe class="iframCom" v-if="curUrl" :src="curUrl" frameborder="0"></iframe>
      </div>
    </div>
    <div   v-if="action === 'todo' || canWithdraw" class="operator-bar">
      <template v-if="!canWithdraw">
        <div @click="toReject">驳回</div>
        <div @click="toAgree">同意</div>
        <div @click="toAssign">转办</div>
      </template>
      <div v-else @click="toReject">撤回</div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import process from '@/api/process'
import otherform from '@/components/process/other/otherform-mobile.vue'
export default {
  inject: ['action', 'canWithdraw'],
  props: {
    step: String,
    status: String,
    processInstanceId: String,
    processDefinitionKey: String,
    taskId: String,
  },
  components: {
    otherform
  },
  data () {
    return {
      readStatusMap: {
        1: "未读",
        2: "已读"
      },
      activeTab: 0,
      text: '',
      curUrl: '',
      stepData:[
        {
          activityId: null,
          activityName: "四川销售",
          assigneeName: "陈慧",
          comment: 'adfad',
          endTime: "2020-05-05 15:41:10",
          operator: "处理中",
          readStatus: 1,
          startTime: "2020-05-05 15:41:10",
          taskId: "422588",
          taskStatus: 2,
        },
        {
          activityId: null,
          activityName: "江苏销售",
          assigneeName: "樊腾",
          comment: '45214asfas245',
          endTime: "2020-05-05 15:41:11",
          operator: "处理中",
          readStatus: 1,
          startTime: "2020-05-05 15:41:10",
          taskId: "422583",
          taskStatus: 2,
        },
      ],
    }
  },
  created(){
    this.getTaskRecordList();
    if (this.step !== 'create'){
      this.getProcessPicture();
    }
  },
  methods: {
    onClickLeft(){
      window.history.back()
    },
    toReject(){
      this.$router.push({ path: '/process-opinion' + window.location.search,query: {
        radio: this.canWithdraw ? 12 : 6,
      }})
    },
    toAgree(){
      this.$router.push({ path: '/process-opinion' + window.location.search,query: {
        radio: 3,
      }})
    },
    toAssign(){
      this.$router.push({ path: '/process-assign' + window.location.search })
    },
    tabClick(val){
      this.activeTab = val;
    },
    getTaskRecordList(){
      process.getTaskRecordList({
         processInstanceId: this.processInstanceId,
      }).then( res =>{
        this.stepData = res.data;
      })
    }, 
    getProcessPicture(){
      process.getProcessPicture(this.processInstanceId).then( res =>{
        this.curUrl = res.data;
      })
    }
  }
}
</script>

<style lang="less">
body{
  min-width: auto;
}
.process-m{
  height: 100%;
  .iframCom{
    width: 1158px;
    height: 600px;
  }
  .body-wrap{
    // padding: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    height: calc(100% - 106px);
  }
  .tab-wrap{
    height: 40px;
    display: flex;
    justify-content:center;
  }
  .m-tab{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
  .tab-item{
      background: #f2f2f2;
      color: #7d7d7d;
      padding: 8px 10px;
      border: 1px solid #f2f2f2;
      width: 84px;
      text-align: center;
      cursor: pointer;
    &.tab2{
      // border-radius: 0 100px 100px 0;
    }
    &.tab1{
      border-radius: 100px 0 0 100px;
    }
    &.tab3{
      border-radius: 0 100px 100px 0;
    }
    &.active{
      background: #409EFD;
      color: #fff;
    }
  }
  .tab-con{
    margin-top: 20px;
    color: #333333;
    height: calc(100% - 14px);
     -webkit-overflow-scrolling: touch;  
    overflow: auto;
    .activityName{
      margin-right: 10px;
    }
    .startTime{
      font-size: 12px;
      color: #999999;
    }
  }
  .van-step__icon--active, .van-step__title--active{
    color: #969799;
  }
  .handing{
    .activityName{
      color: #33cc66;
    }
  }
  .step-wrap{
    color: #333333;
  }
  .t-title{
    // color: #333333;
  }
  .t-con{
    min-height: 50px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    margin-top: 6px;
    font-size: 12px;
    .t-head{
      height: 30px;
      background: #f2f2f2;
      padding: 4px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .assigneeName{
      margin-right: 6px;
    }
    .readStatus{
      color: #999999;
    }
    .operator{
      color: #999999;
    }
    .endTime{
      color: #999999;
    }
    .t-body{
      padding: 4px;
      font-size: 14px;
      word-break: break-all;
    }
  }
  .operator-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    border-top: 1px solid #f2f2f2;
    background: #fff;
    >div {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #409EFD;
      &:hover{
        color: #e5b268;
      }
    }
  }
}
</style>
